<template>
  <!--外形数据表-->

  <div class="table-wrapper w-100">
    <div class="title rounded shadow-harsh pv-10">
      科研报告表

      <div class="search">
        <el-button size="mini" type="success" @click="addHandler">新增</el-button>
        <el-input
          style="margin-left: 10px"
          v-model="search"
          size="mini"
          placeholder="输入细节关键字搜索" />
      </div>

    </div>
    <div>

      <!--    通过字段进行 filter-->
      <el-table
        size="small"
        show-overflow-tooltip
        :v-loading="loading"
        height="250px"
        class="w-100 rounded shadow-harsh p-5"
        :data="tableData.filter(data => !search || data.details.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*10,currentPage*10)">

        <el-table-column
          type="index"
          width="50">
        </el-table-column>

        <el-table-column
          label="报告名称"
          prop="originalFileName"
          align="center">
        </el-table-column>

<!--        <el-table-column-->
<!--          label="本地名称"-->
<!--          prop="localFileName"-->
<!--          align="center">-->
<!--        </el-table-column>-->

        <el-table-column
          label="下载地址"
          width="100px"
          prop="downloadUrl"
          align="center">
          <template scope="scope">
            <el-link v-if="scope.$index !== editIndex" type="primary" target="_blank" :href="scope.row.downloadUrl">下载链接</el-link>
            <p v-else>-</p>
          </template>
        </el-table-column>

        <el-table-column
          label="备注信息"
          prop="details"
          width="300px"
          align="center">
        </el-table-column>


        <el-table-column
          align="center"
          label="插入时间"
          width="100px"
          sortable
          prop="createTime">
        </el-table-column>

        <el-table-column
          align="center">

          <template slot-scope="scope">

              <el-button
                @click="detail(scope.$index, scope.row)"
                size="mini"
                type="primary">
                详情
              </el-button>

            <el-popconfirm
              @confirm="handleDelete(scope.$index, scope.row)"
              title="您确定要删除数据吗?">
              <el-button
                slot="reference"
                size="mini"
                type="danger">删除
              </el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination class="pagination"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="10"
                     :total="tableData.length"
                     layout="total, prev, pager, next, jumper">
      </el-pagination>

    </div>

    <el-dialog title="新增报告" :visible.sync="dialogFormVisible">
<!--      <div class="hint">-->
<!--        *用户名与密码必须包含数字和大小写字母，且用户名4-12位，密码8-16位。-->
<!--      </div>-->
      <el-form :model="form">
        <el-form-item label="文件备注（细节）" :label-width="formLabelWidth">
          <el-input v-model="form.detail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文件" :label-width="formLabelWidth">
          <el-upload
            :on-success="uploadSuccessHandler"
            :limit="1"
            class="upload-demo pv-30"
            drag
            action="/api/utils/uploadFile">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div>只能上传excel/csv文件，且不超过128Mb</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button :disabled="!judgeValidity" @click="submitHandler" type="primary">确 定</el-button>
      </div>
    </el-dialog>

<!--    临时需求 所以这么写-->
  <chiliResearchTable v-if="visibleDoc === '辣椒科研表'"></chiliResearchTable>
  <flower-chili-research-table v-else-if="visibleDoc === '花椒科研表'"></flower-chili-research-table>
    <div class="hint" v-else>**暂无详细数据**</div>

  </div>
</template>

<script>
import chiliResearchTable from "../components/chili-research-table"
import flowerChiliResearchTable from "../components/flower-chili-research-table"

export default {
  name: "research-doc-table",
  components: {
    chiliResearchTable, flowerChiliResearchTable
  },
  mounted() {

    this.$api.getDocument('scientific_research_doc').then(res => {
      this.tableData = res.data['records'].sort((a, b) => {
        return a.originalFileName - b.originalFileName
      })
      this.loading = false
    })
  },

  computed:{
    judgeValidity: function() {
      return this.form.fileName && this.form.detail && this.form.fileInfo
    }
  },
  methods: {
    getTableIndexByIndex(index) {
      // 通过表的row index来获取表格数据中的row index 在 list 中使用要 -1
      return index + (this.currentPage - 1) * 10 + 1
    },

    addHandler() {
      this.form = {
        detail:null,
        fileName: null,
        fileInfo: null
      }
      this.dialogFormVisible = true
    },

    handleCancel: function() {
      this.editIndex = null
    },
    // handleSave: function() {
    //
    // },

    submitHandler() {
      this.$api.editDocument('scientific_research_doc', 0, 'save', this.form.detail, this.form.fileInfo).then(res => {
        console.log(res)
        if (res['success']) {
          this.tableData.push(res.data['documentInfo'])
          this.dialogFormVisible = false
          this.$message({
            message: '添加成功',
            type: 'success',
            duration: 2000
          })
        }
      })
    },
    detail(index, row) {
      this.visibleDoc = row.details
    },

    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    },

    uploadSuccessHandler(res, file) {
      console.log(res, file)
      this.form.fileInfo = res.data['fileInfo']
      this.form.fileName = file.name

    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$api.editDocument('learning_materials_doc', row.id, 'remove', '', {}).then(res => {
        console.log(res)
        if (res['success']) {
          let n = this.getTableIndexByIndex(index)
          console.log(n, this.tableData[n-1])
          this.tableData.splice(n-1, 1)

          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        }
      })
    },

      },

  data() {
    return {
      tableData: [],
      search: "",
      currentPage: 1,
      loading: true,
      visibleDoc: '',

      form:{
        detail:null,
        fileName: null,
        fileInfo: null
      },
      formLabelWidth: "180px",
      dialogFormVisible: false,
      visible: false
    };
  },
};
</script>

<style scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #616161;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

</style>